import React, {Component} from 'react';
import {Motion, spring} from 'react-motion';
import './toast.scss';

class Toast extends Component {
  constructor (props) {
    super(props);
    this.state = {
      show: false
    };
  }
  // 倒计时关闭
  componentDidMount () {
    this.setState({show: true});
    setTimeout(() => {
      // this.props.onClose();
      this.fnHide();
    }, this.props.wait);
  }
  fnHide () {
    this.setState({show: false});
  }
  fnRest = () => {
    if (!this.state.show) {
      // console.log('toast hide');
      this.props.onClose();
    }
  }
  render () {
    const {content} = this.props
    return (
      <Motion style={{opacity: spring(this.state.show ? 1 : 0)}} onRest={this.fnRest}>
        {
          ({opacity}) => (
            <div className="pa-toast" style={{opacity}}>
              {content}
            </div>
          )
        }
      </Motion>
    )
  }
}

export default Toast;